<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../css/swiper.min.css">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/common.css">
    <style>
        .item_content {
            width: 201px;
            height: 160px;
            margin-right: 32px;
            cursor: pointer;
        }

        .item_content:last-of-type {
            margin-right: 0;
        }

        .item_img_list {
            height: 118px;
        }

        .item_img_list video {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .item_desc {
            font-size: 16px;
            color: #fff;
            padding: 0 6px;
            overflow: hidden;
            /*文本不换行*/
            white-space: nowrap;
            /*文字超出用省略号*/
            text-overflow: ellipsis;
            margin-top: 7px;
        }
    </style>
</head>
<body style="overflow: hidden;">
<!-- 轮播图区域 -->
<div class="swiper-container" id="swiperBox">
    <div class="swiper-wrapper" id="j03BottomBox">
    </div>
</div>
</body>
<script type="text/javascript" charset="utf-8" src="../../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/swiper.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/common.js"></script>
<script>
	$(function () {

		$('#j03BottomBox').on('click', '.item_content', function () {
			let idx = $(this).attr('data-index')
			window.parent.parent.postMessage({'data': brr[idx], 'type': 'openPop'}, '*')
		})
		let param = {}
		let brr = []
		getJson('qytt_SPJC.json', param, function (res) {
			if (res.code === 200) {
				brr = res.data
				for (let i = 0; i < res.data.length; i += 4) {
					let arr = res.data.slice(i, i + 4)
					let str = `<div class="swiper-slide">`;
					for (let j = 0; j < arr.length; j++) {

						str += `<div class="item_content l" data-index="${i + j}">
                                    <div class="item_img_list">
                                    <video class="img_box1"
                                    src="../../video/bottom${j}.mp4" controls></video> </div>
                                    <div class="item_desc">${arr[j].title}</div>
                                    </div>`
					}
					str += `</div>`;
					$('#j03BottomBox').append(str);
				}
				new Swiper('#swiperBox', {
					autoplay: true,//可选选项，自动滑动
				})
			}

		},)
	})
</script>
</html>
